<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta name="description" content="菲麦前端">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-title" content="菲麦前端">
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <meta name="format-detection" content="telephone=no, email=no" />
    <!-- Color the status bar on mobile devices -->
    <meta name="theme-color" content="#2F3BA2">
    <!--下面三个是清除缓存 微信浏览器缓存严重又无刷新；这个方法调试的时候很方便-->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>{% block title %}菲麦前端 {{title}}{% endblock %}</title>
    <link rel="stylesheet" href="client/css/common.css">
    <link rel="stylesheet" href="client/css/animate.css">
    <link rel="stylesheet" href="client/css/master.css">
    <link rel="stylesheet" href="client/css/main.css">
</head>
<body>
    <!-- 顶部 (包括导航条和工具条)-->
    <header class="header">
        <h1 class="title">
        <a href='home' style="color: #FFFFFF">在线h5生成工具</a>
        </h1>
        <ul class="editor-tool">
            <li id='addText' class="tool-text">文本</li>
            <li id='addImage' class="tool-img">图片</li>
        </ul>
        <div class="user-btn">
            <a href="javascript:void(0);" class="btn setting" id='setting'>设置</a>
            <a href="javascript:void(0);" class="btn save" id='save'>保存</a>
            <a href="javascript:void(0);" class="btn preview" id='preview'>运行</a>
            <a href="javascript:void(0);" class="btn close" id='download'>下载</a>
        </div>
    </header>
    <!-- 顶部 -->

    <!-- 左边页面 -->
    {% block left %} {% include "./_inc/left.html" %} {% endblock %}
    <!-- 左边页面 -->

    <!-- 内容 -->
    <section class="content">
        <div class="simulator-wrap" id='mainContent'>
            {% if data %}
                {% set i = 0 %}
                {% for page in data.pages %}
                    {% set i = i+1 %}
                    <div class="simulator-box{% if i==1 %} active {% endif %}" id="page{{ i }}-stage" style="background-image: url({{page.burl}});background-color: {{page.bgColor}}">
                        {% set j = 0 %}
                        {% for item in page.items %}
                            {% set j= j+1 %}
                            {% if item.text %}
                                <div id="page{{ i }}-stage-text-item{{j}}" class="create-text-box" title="编辑文本"  data-type="text" style="left: {{item.px}}px; top: {{item.py}}px;width: {{item.width}}px;height: {{item.height}}px;line-height: {{item.height}}px;opacity:{{item.transparent/100}};z-index: {{item.zIndex}};color:#{{item.textStyle.color}};font-size: {{item.textStyle['font-size']}};animation: {{item.animateClass}} {{item.animateDuration/1000}}s linear;">
                                    <p contentEditable="true" class="ol-n">
                                        {{ item.text }}
                                    </p>
                                </div>
                            {% else %}
                                <div class="create-img-box" id="page{{ i }}-stage-img-item{{j}}" style="left: {{item.px}}px; top: {{item.py}}px;width: {{item.width}}px;height: {{item.height}}px;opacity:{{item.transparent/100}};z-index: {{item.zIndex}};animation: {{item.animateClass}} {{item.animateDuration/1000}}s linear;">
                                    <img src="{{item.imgUrl}}" />
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endfor %}
            {% else %}
                 <div class="simulator-box active" id="page1-stage"> </div>
            {% endif %}
        </div>
    </section>
    <!-- 内容 -->


    <!-- 右边页面 -->
    {% block right %} {% include "./_inc/right.html" %} {% endblock %}
    <!-- 右边页面 -->

    <!-- 弹出图片选择框 -->
    {% block dialog %} {% include "./_inc/dialog.html" %} {% endblock %}
</body>
{% block script %}
    <script type="text/javascript">
        {% if data %}
            window.isEdit = true;

            window.settingData = {
                id: '{{data._id}}',
                author: '{{data.author}}',
                name: '{{data.name}}',
                discript: '{{data.discript}}',
                cover: '{{data.cover}}',
                pointer: '{{data.pointer}}'
            };

            window.pageData = {
                {% set i = 0%}
                {% for page in data.pages %}
                    {% set i = i+1 %}
                    page{{ i }}: {
                        pageId: 'page{{ i }}',
                        stageId: 'page{{ i }}-stage',
                        bgColor: '{{page.bgColor}}',
                        bgImage: '{{page.burl}}'
                    },
                {% endfor %}
            };

            window.pageItemData = {
                {% set i = 0 %}
                {% for page in data.pages %}
                    {% set i = i+1 %}
                    {% set j= 0 %}
                    {% for item in page.items %}
                        {% set j = j+1 %}
                        {% if item.text %}
                            'page{{ i }}-stage-text-item{{j}}': {
                                itemId: 'page{{ i }}-stage-text-item{{j}}',
                                pageId: 'page{{ i }}',
                                type: 'text',
                                animate: '{{ item.animateClass }}',
                                animateDuration: '{{ item.animateDuration/1000 }}',
                                animateTimeOut: '{{ item.nextAnimateTime }}',
                                fontSize: '{{ item.textStyle['font-size'] }}',
                                color: '{{ item.textStyle.color }}',
                                opacity: '{{ item.transparent }}',
                                width: '{{ item.width }}',
                                height: '{{ item.height }}',
                                px: '{{ item.px }}',
                                py: '{{ item.py }}',
                                text: '{{ item.text }}'
                            },
                        {% else %}
                            'page{{ i }}-stage-img-item{{j}}': {
                                itemId: 'page{{ i }}-stage-img-item{{j}}',
                                pageId: 'page{{ i }}',
                                type: 'img',
                                animate: '{{ item.animateClass }}',
                                animateDuration: '{{ item.animateDuration/1000 }}',
                                animateTimeOut: '{{ item.nextAnimateTime }}',
                                opacity: '{{ item.transparent }}',
                                imgUrl: '{{ item.imgUrl }}',
                                width: '{{ item.width }}',
                                height: '{{ item.height }}',
                                px: '{{ item.px }}',
                                py: '{{ item.py }}'
                            },
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            }
        {% endif %}
    </script>
    <script src="client/js/jquery-2.1.0.min.js"></script>
    
    <script type="text/javascript" src="client/js/ZResize.js"></script>
    <script type="text/javascript" src="client/js/ZUpload.js"></script>
    <script type="text/javascript" src="client/js/rTab.js"></script>
    <script type="text/javascript" src="client/js/page.js"></script>
    <script type="text/javascript" src="client/js/textItem.js"></script>
    <script type="text/javascript" src="client/js/imageItem.js"></script>
    <script type="text/javascript" src="client/js/changeTab.js"></script>
    <!-- 拾色器 -->
    <script src='client/lib/jscolor.js'></script>
    {% if slug != null %}
     <script src="client/js/{{slug}}.js"></script>
    {% endif %}
{% endblock %}
</html>
